<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The CheckBox Tree</title>
    <style type="text/css">
      @import "../../../dijit/themes/claro/claro.css";
      @import "../../../dijit/themes/claro/document.css";
      @import "../../../dijit/tests/css/dijitTests.css";
      @import "../../themes/claro/claro.css";
    </style>

    <script type="text/javascript">
      var dojoConfig = {
            async: true,
            parseOnLoad: true,
            isDebug: true,
            baseUrl: "../../../",
            packages: [
              { name: "dojo",  location: "dojo" },
              { name: "dijit", location: "dijit" },
              { name: "cbtree",location: "cbtree" }
            ]
      };
    </script>

    <script type="text/javascript" src="../../../dojo/dojo.js"></script>
    <script type="text/javascript">
      require([
        "dojo/ready",
        "dojo/data/ItemFileWriteStore",
        "cbtree/Tree",                    // Checkbox tree
        "cbtree/models/ForestStoreModel"  // ForestStoreModel
        ], function( ready, ItemFileWriteStore, Tree, ForestStoreModel) {
            // Declare an JSON object
            var data = { "identifier": "name",
                         "label": "name",
                         "items": [
                            { "name":"Africa", "type":"continent", "children":[
                              { "name":"Egypt", "type":"country" },
                              { "name":"Kenya", "type":"country", "children":[
                                { "name":"Nairobi", "type":"city" },
                                { "name":"Mombasa", "type":"city" } ]
                              },
                              { "name":"Sudan", "type":"country", "children":
                                { "name":"Khartoum", "type":"city" }
                              } ]
                            },
                            { "name":"Asia", "type":"continent", "children":[
                              { "name":"China", "type":"country" },
                              { "name":"India", "type":"country" },
                              { "name":"Russia", "type":"country" },
                              { "name":"Mongolia", "type":"country" } ]
                            },
                            { "name":"Australia", "type":"continent", "children":
                              { "name":"Commonwealth of Australia", "type":"country"}
                            },
                            { "name":"Europe", "type":"continent", "children":[
                              { "name":"Germany", "type":"country" },
                              { "name":"France", "type":"country" },
                              { "name":"Spain", "type":"country" },
                              { "name":"Italy", "type":"country" } ]
                            },
                            { "name":"North America", "type":"continent", "children":[
                              { "name":"Mexico", "type":"country", "children":[
                                { "name":"Mexico City", "type":"city" },
                                { "name":"Guadalajara", "type":"city" } ]
                              },
                              { "name":"Canada", "type":"country", "children":[
                                { "name":"Ottawa", "type":"city"},
                                { "name":"Toronto", "type":"city"}]
                              },
                              { "name":"United States of America", "type":"country" } ]
                            },
                            { "name":"South America", "type":"continent", "children":[
                              { "name":"Brazil", "type":"country" },
                              { "name":"Argentina", "type":"country" } ]
                            }
                        ]
                      };

          var store = new ItemFileWriteStore( { data: data });
          var model = new ForestStoreModel( { store: store,
                                               query: {type: "continent"},
                                               rootLabel: "The Earth"
                                             });
          ready(function(){
            var tree = new Tree( { model: model, id: "earthTree" }, "CheckboxTree" );
            tree.startup();
          });
        });
      </script>

  </head>

  <body class="claro">
    <h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1>
    <p>
			A basic CheckBox Tree using an in memory JSON object to create the store.
		</p>
    <div id="CheckboxTree">
    </div>
  </body>
</html>